<template>
	<view class="commission">
		<view class="commission-card">
			<view class="padding flex text-center text-grey bg-white shadow-warp">
				<view class="flex flex-sub flex-direction solid-right animation-slide-top"
					:style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-orange">1630</view>
					<view class="margin-top-sm"></text>可提佣金</view>
				</view>

				<view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-orange">1931</view>
					<view class="margin-top-sm">累积佣金</view>
				</view>
			</view>
		</view>
		<!-- 佣金明细 -->
		<view class="commission-list-wrap" style="height: 100%;">
			<view class="commission-list-title">
				佣金明细
			</view>
			<view class="commission-list">
				<view class="commission-item" v-for='(item,index) in commissionList' :key="index">
					<view class="commission-item-time">
						<h5>{{item.time}}</h5>
						<view class="status" :class="item.status=='0'?'red':item.status=='1'?'orange':'green'">
							{{item.status=='0'?'待审核':item.status=='1'?'已完成':'已到账'}}
						</view>
					</view>
					<view class="commission-item-content">
						<view class="project">
							{{item.content}}
						</view>
						<view class="price">
							￥-50
						</view>
					</view>
				</view>
			<!-- 	<view class="commission-item">
					<view class="commission-item-time">
						<h5>2023-11-11</h5>
						<view :class="status">
							待审核
						</view>
					</view>
					<view class="commission-item-content">
						接单中式按摩（185346887788）项目金额298
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="footer">
			<u-button type='warning' >申请提现</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commissionList: [{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 1
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 0
				},
				{
					time: "2023-11-11",
					content: '接单中式按摩（185346887788）项目金额298',
					status: 2
				}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background: #F8F8F8 !important;
	// }
	.commission{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			& button {
				width: 100%;
			}
		}
	.commission-list{
		height: calc(100% - 350rpx);
		overflow-y: auto;
		padding: 0 20rpx
	}
	.commission-list-wrap {
		width: 96%;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.commission-list-title {
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		color: #808580;
	}

	.commission-list-title:before,
	.commission-list-title:after {
		content: "";
		flex: 1 1;
		border-bottom: 1px solid #D5E0D5;
		margin: auto;
	}

	.commission-list-title:before {
		margin-right: 20rpx
	}

	.commission-list-title:after {
		margin-left: 20rpx
	}

	.commission-item {
		padding: 40rpx 0;
		border-bottom: 1px dashed #D5E0D5;

		.commission-item-content {
			// width: 80%;
			display: flex;
			justify-content: space-between;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #DD605C;
			.project{
				width: 88%;
				color: #999;
			}
			.price{
				// width: 80rpx;
				flex: 1;
				text-align: center;
				font-weight: bold;
			}
		}

		.commission-item-time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			h5 {
				font-size: 36rpx;
			}

			.status {
				padding: 10rpx 20rpx;
				background-color: #eee;
				border-radius: 8rpx;
			}
			.orange{
				background-color: rgba(255,173,14,0.1);
				color: #ffad0e;
			}
			.green{
				background-color: rgba(65,220,131,0.1);
				color: #41dc83;
			}
			.red{
				background: #ffecec;
				color: #ff7070;
			}
		}
	}

	.commission-card {
		width: 96%;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>